<template>
  <div class="indexRecommendTitleControl">
    <div class="control-section">
      <div class="control-header">
        <span>添加图片</span>
      </div>
      <div class="control-body">
        <uploadImg :imgList="params.urls" @deleteImg="deleteImg" :title="'添加图片'" size="168*168px" type="list" @uploadSuccess="uploadSuccess"></uploadImg>
        <div class="control-item">
          <div class="control-title">链接设置</div>
          <div class="control-content">
            <chooseLink :link="params.link || {}" @chooseEnd="chooseLink"></chooseLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from "@/components/DiyNew/uploadImg/index.vue";
import chooseLink from "@/components/DiyNew/chooseLink/index.vue";
export default {
  name: "indexRecommendPicsControl",
  components: {
    uploadImg,
    chooseLink
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
    };
  },
  methods: {
    deleteImg(e) {
        console.log(e);
        // this.params.urls.splice(e.index,1)
        let arr = JSON.parse(JSON.stringify(this.params.urls))
        arr.splice(e.index,1)
        this.$setWithAction(this.params, "urls", arr)
    },
    uploadSuccess(e) {
        console.log(e);
        if(this.params.urls.length >= 2) {
            return
        }else {
            // this.params.urls.push({picUrl:e.val})
            let arr = JSON.parse(JSON.stringify(this.params.urls))
            arr.push({picUrl:e.val})
            this.$setWithAction(this.params, "urls", arr)
        }
    },
    chooseLink(e) {
      // this.$set(this.params,'link',e)
      this.$setWithAction(this.params, "link", e)
    }
  },
};
</script>

<style lang="scss" scoped>
.indexRecommendTitleControl {
  height: calc(100vh - 54px);
  padding-bottom: 20px;
  ::-webkit-scrollbar {
    height: 0 !important;
    width: 0px !important;
  }
}
.control-section {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: center;
  height: 100%;
  position: relative;
  .control-header {
    width: 100%;
    height: 48px;
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    span:first-child {
      font-weight: 600;
      color: #000000;
    }
  }
  .control-body {
    flex: auto;
    height: 0;
    overflow: auto;
    width: 228px;
    margin: 0 auto;
    .control-item {
      width: 100%;
      .control-title {
        padding: 24px 0 14px 0;
        font-size: 12px;
        color: #000000;
        text-align: left;
      }
      .flex-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .reset {
        font-size: 12px;
        color: #9e9e9e;
        cursor: pointer;
      }
      .control-content {
        .example-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          .example-item {
            width: 70px;
            height: 38px;
            background: #f6f7f9;
            border-radius: 4px;
            margin-right: 9px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            img {
              width: 42px;
              height: 18px;
            }
          }
          .example-item:last-child {
            margin-right: 0;
          }
          .active {
            border: 2px solid #1890fc;
          }
        }
        .border-select,
        .fixed-top-select {
          width: 100%;
          height: 100%;
          ::v-deep .ant-select-selection--single {
            height: 100%;
            border: 0 none;
            background: #f2f2f2;
          }
          ::v-deep .ant-select-selection__rendered {
            line-height: 40px;
          }
        }
        .keyword-input {
          width: 228px;
          height: 40px;
          background: #f6f7f9;
          border-radius: 4px;
          input {
            height: 100%;
            background-color: #f6f7f9;
            border: 0 none;
          }
        }
      }
    }
  }
}
</style>